import React, { Component } from 'react';

// v16.3版本以后的
export default class App extends Component {
  // 1.初始化  - 挂载时
  // 如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数
  // 不要调用 setState() 方法
  constructor (props) {
    super(props)
    this.state = {
      count: 100
    }
  }
  // 1. 初始化 - 挂载时
  // 2.运行时 --- 更新时
  // componentWillMount () {}  废除
  // 返回一个对象来更新 state，如果返回 null 则不更新任何内容
  // 让组件在 props 变化时更新 state
  // static getDerivedStateFromProps(props, state) {
  //   return {
  //     count: 200
  //   }
  // }

  // 1. 初始化 - 挂载时
  // 2.运行时 - 更新时
  render() {
    return (
      <div> 
        <button onClick = { () => {
          this.setState({
            count: this.state.count + 100
          })
        }}>add</button>
        { this.state.count } </div>
    );
  }

  // 1.初始化 --- 挂载时
  // 最多，类似vue中饿mounted
  // DOM操作，实例化，数据请求
  componentDidMount () {}

  // 2.运行时 --- 更新时
  // 新版本中已经逐步的废除
  // componentWillReceiveProps () {}
  
  // 2.运行时 --- 更新时
  // 提升React性能关键
  shouldComponentUpdate () {
    return true // 默认值为true
  }
  // 2.运行时 --- 更新时
  // 最近一次渲染输出（提交到 DOM 节点）之前调用
  getSnapshotBeforeUpdate(prevProps, prevState) {

  }
  // 2.运行时-更新时
  // 新版本中已经逐步的废除
  // componentWillUpdate () {}
  // 2.运行时 --更新时
  //  有条件变化的情况执行数据请求 一般对比prevProps 和 props
  componentDidUpdate (prevProps, prevState, snapshot) {}
  // 3.销毁阶段 - 卸载时
  // 组件卸载及销毁之前直接调用
  // 执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等
  // 无法调用 setState
  componentWillUnmount () {}

  // 4.错误处理
  // 后代组件抛出错误后被调用
  componentDidCatch () {}

  // 4.错误处理
  // 后代组件抛出错误后被调用
  static getDerivedStateFromError() {}
}
